<template>
  <u-checkbox-group
  >
    <view class="container" @click="toGoods()">
      <u-checkbox
          style="margin-right: 10rpx"
          @change="change"
          shape="circle"
          activeColor="#FF9E29"
          :name="props.index"
          :checked="item.checked"
          :key="props.index"
          :customStyle="{marginBottom: '8px'}"
      ></u-checkbox>
      <view class="image">
        <!--      <up-image :show-loading="true" :src="'https://'+item.defaultImg" width="200rpx" height="250rpx"></up-image>-->
        <up-image :show-loading="true" :src="'https://'+item.images[0]" radius="10" width="200rpx"
                  height="250rpx"></up-image>
      </view>
      <view class="content">
        <text class="u-line-2">
          {{ item.goodsName }}
        </text>

        <view style="margin-top: 85rpx"></view>

        <view style="margin-top: 17rpx;display: flex;justify-content: space-between;align-items: center">
          <view>
            <text class="price">￥</text>
            <text style="font-weight: 600;font-size: 40rpx;color: #FF3333;">{{ item.price }}</text>
          </view>
          <u-number-box v-model="item.count">
            <template #minus>
              <view
                  class="minus"
                  style="border: 1px solid #FF9E29;"
              >
                <u-icon
                    name="minus"
                    color="#FF9E29"
                    size="12"
                ></u-icon>
              </view>
            </template>
            <template #input>
              <text
                  style="width: 30rpx;text-align: center;"
                  class="input"
              >{{ item.count }}
              </text>
            </template>
            <template #plus>
              <view
                  class="plus"
              >
                <u-icon
                    name="plus"
                    color="#FFFFFF"
                    size="12"
                ></u-icon>
              </view>
            </template>
          </u-number-box>
        </view>

      </view>
    </view>
  </u-checkbox-group>
</template>

<script setup lang="ts">
import {ref, reactive} from "vue";
import {useCarStore} from "@/store/car";

const carStore = useCarStore()
const props = defineProps(['index', 'item'])
const url = "https://picsum.photos/300/200?index=" + props.index;
const item = ref({})
item.value = props.item

const toGoods = () => {
  uni.navigateTo({
    url: '/pages/home/goodsDetail/goodsDetail?id=' + item.value.id
  })
}

const change = (isCheck: any) => {
  carStore.carItems[props.index].checked = isCheck
}
</script>


<style scoped lang="scss">

.minus {
  width: 22px;
  height: 22px;
  border-width: 1rpx;
  //background: #eeeded;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  @include flex;
  justify-content: center;
  align-items: center;
}

.input {
  padding: 0 10px;
}

.plus {
  width: 22px;
  height: 22px;
  background-color: #FF9E29;
  border-radius: 50%;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  align-items: center;
}

.container {
  padding: 40rpx 40rpx 40rpx 20rpx;
  display: flex;
  margin: 0 15rpx 15rpx 15rpx;
  border-radius: 10rpx;
  background: white;
}

.content {
  margin-left: 15rpx;
  display: flex;
  flex-direction: column;
}

.author {
  margin-top: 17rpx;
  font-size: 20rpx;
  color: #AEAEAE;
}

.price {
  font-size: 30rpx;
  color: #FF3333;
  font-weight: 600;
  margin-top: 30rpx;
}
</style>
